<template>
  <view class="profile-container">
    <uni-forms ref="form" :model="formData" class="form-wrapper">
      <!-- 姓名 -->
      <uni-forms-item label="姓名" required>
        <input 
          v-model="formData.name" 
          placeholder="请输入您的姓名"
          disabled
          class="disabled-input"
        />
      </uni-forms-item>

      <!-- 性别 -->
      <uni-forms-item label="性别" required>
        <radio-group @change="onGenderChange">
          <label class="radio-item">
            <radio value="male" :checked="formData.gender === 'male'" color="#007AFF" disabled="true"/>
            男
          </label>
          <label class="radio-item">
            <radio value="female" :checked="formData.gender === 'female'" color="#007AFF"/>
            女
          </label>
        </radio-group>
      </uni-forms-item>
	  	  
      <!-- 手机号 -->
      <uni-forms-item label="手机号" required>
        <view class="phone-wrapper">
          <input 
            v-model="formData.phone" 
            type="number"
            placeholder="请输入手机号"
            class="phone-input"
          />
          <text class="change-phone" @click="handleChangePhone">更换</text>
        </view>
      </uni-forms-item>

      <!-- 生日 -->
   <uni-forms-item label="入职日期" required>
	    <!-- 设置为不可更改 -->
     <picker 
       mode="date" 
       :value="formData.birthday" 
       @change="onDateChange"
       class="date-picker"
       :disabled="true" 
     >
       <view class="picker-content">
         {{ formData.birthday || '请选择生日' }}
       </view>
     </picker>
   </uni-forms-item>

      <!-- 详细地址 -->
      <uni-forms-item label="详细地址" required>
        <textarea 
          v-model="formData.address" 
          placeholder="请输入详细地址"
          auto-height
          class="address-textarea"
        />
      </uni-forms-item>

      <!-- 保存按钮 -->
      <button 
        class="submit-btn" 
        :disabled="!formChanged"
        @click="handleSubmit"
      >
        保存
      </button>

    
    </uni-forms>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 表单数据
const formData = reactive({
  name: '糖醋',
  gender: 'female',
  phone: '158****4949',
  birthday: '2025-01-01',
  address: '广东省广州市海珠区'
})

// 原始数据备份
const originalData = JSON.parse(JSON.stringify(formData))

// 判断表单是否修改
const formChanged = computed(() => {
  return JSON.stringify(formData) !== JSON.stringify(originalData)
})

// 性别选择
const onGenderChange = (e) => {
  formData.gender = e.detail.value
}

// 日期选择
const onDateChange = (e) => {
  formData.birthday = e.detail.value
}

// 更换手机号
const handleChangePhone = () => {
  uni.navigateTo({
    url: '/pages/user/change-phone'
  })
}

// 提交表单
const handleSubmit = async () => {
  try {
    // 这里添加实际提交逻辑
    uni.showLoading({ title: '保存中...' })
    
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新原始数据
    Object.assign(originalData, formData)
    
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: '保存失败',
      icon: 'error'
    })
  }
}

</script>

<style lang="scss" scoped>
.profile-container {
  padding: 30rpx;
  min-height: 100vh;
}

.form-wrapper {
  border-radius: 50rpx;
  padding: 30rpx;
  background-color: $uni-bg-color;
}

// 禁用输入框样式
.disabled-input {
  color: #999;
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
}

.radio-item {
  margin-right: 40rpx;
  display: inline-flex;
  align-items: center;
  font-size: 28rpx;
}

.phone-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  
  .phone-input {
    flex: 1;
    margin-right: 20rpx;
  }
  
  .change-phone {
    color: #007AFF;
    font-size: 26rpx;
    white-space: nowrap;
  }
}

.date-picker {
  width: 100%;
  
  .picker-content {
    color: #333;
    
    .tip-text {
      color: #999;
      font-size: 24rpx;
      margin-left: 20rpx;
    }
  }
}

.address-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.submit-btn {
  margin-top: 60rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  
  &[disabled] {
    background-color: #ddd;
    color: #999;
  }
}


.account-manage {
  margin-top: 40rpx;
  padding: 30rpx 0;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 30rpx;
}
</style>